import { hasClass, animate } from '@/utils/dom';

const seriesRegExp = /^cq\-popup$/;

class PopupClass {
	el = null; // 元素
	series = []; // 组件系列名
	overlay = null; // 遮罩层
	constructor(params) {
		if (params.element) {
			this.el = document.querySelector(params.element);
			if (this.el) {
				this.el.classList.forEach((cls) => {
					const pass = seriesRegExp.test(cls);
					if (pass) this.series.push(cls);
				});

				if (this.el.children.length > 0) {
					// 创建遮罩层组件
					const overlay = document.createElement('div');
					overlay.classList.add('cq-overlay');
					overlay.addEventListener('click', () => {
						this.close();
					});
					this.overlay = overlay;
					this.el.insertBefore(overlay, this.el.children[0]);
				}
			}
		}
		if (params.onClose) {
			this.onClose = params.onClose;
		}
	}

	show() {
		// todo 优化封装，组件之间互相调用
		this.overlay.classList.add('show');
		animate(this.overlay, {
			style: 'opacity',
			target: 1,
			speed: 0.1,
		});

		this.el.classList.add('show');

		if (hasClass(this.el, 'cq-popup--top')) {
			animate(this.el.querySelector('.cq-popup--content'), {
				style: 'transform',
				target: 0,
				speed: 0.1,
				get: (val) => {
					return -100;
				},
				set: (val) => {
					return `translate(-50%, ${val}%)`;
				},
			});
		}

		if (hasClass(this.el, 'cq-popup--bottom')) {
			animate(this.el.querySelector('.cq-popup--content'), {
				style: 'transform',
				target: 0,
				speed: 0.1,
				get: (val) => {
					return 100;
				},
				set: (val) => {
					return `translate(-50%, ${val}%)`;
				},
			});
		}

		if (hasClass(this.el, 'cq-popup--left')) {
			animate(this.el.querySelector('.cq-popup--content'), {
				style: 'transform',
				target: 0,
				speed: 0.1,
				get: (val) => {
					return -100;
				},
				set: (val) => {
					return `translate(${val}%, -50%)`;
				},
			});
		}

		if (hasClass(this.el, 'cq-popup--right')) {
			animate(this.el.querySelector('.cq-popup--content'), {
				style: 'transform',
				target: 0,
				speed: 0.1,
				get: (val) => {
					return 100;
				},
				set: (val) => {
					return `translate(${val}%, -50%)`;
				},
			});
		}
	}

	close() {
		let target = 0;
		const speed = 0.1;
		let get = () => {};
		let set = () => {};
		const callback = () => {
			this.el.classList.remove('show');
			if (this.onClose) {
				this.onClose();
			}
		};

		if (hasClass(this.el, 'cq-popup--top')) {
			target = -100;
			get = (val) => {
				return 0;
			};
			set = (val) => {
				return `translate(-50%, ${val}%)`;
			};
		}

		if (hasClass(this.el, 'cq-popup--bottom')) {
			target = 100;
			get = (val) => {
				return 0;
			};
			set = (val) => {
				return `translate(-50%, ${val}%)`;
			};
		}

		if (hasClass(this.el, 'cq-popup--left')) {
			target = -100;
			get = (val) => {
				return 0;
			};
			set = (val) => {
				return `translate(${val}%, -50%)`;
			};
		}

		if (hasClass(this.el, 'cq-popup--right')) {
			target = 100;
			get = (val) => {
				return 0;
			};
			set = (val) => {
				return `translate(${val}%, -50%)`;
			};
		}

		if (hasClass(this.el, 'cq-popup--center')) {
			callback();
		} else {
			animate(this.el.querySelector('.cq-popup--content'), {
				style: 'transform',
				target,
				speed,
				get,
				set,
				callback,
			});
		}

		animate(this.overlay, {
			style: 'opacity',
			target: 0,
			speed: 0.1,
			callback: () => {
				this.overlay.classList.remove('show');
			},
		});
	}
}

const Popup = {
	create(params) {
		return new PopupClass(params);
	},
};

export default Popup;
